<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		    .btn {
		      padding: 10px 20px;
		      background-color: #4CAF50;
		      color: white;
		      border: none;
		      border-radius: 4px;
		      cursor: pointer;
		      font-size: 16px;
		      margin-right: 10px;
		    }
		    
		    .btn:hover {
		      background-color: #45a049;
		    }
		    
		    /* 弹窗样式 */
		    .modal {
		      position: fixed;
		      top: 0;
		      left: 0;
		      width: 100%;
		      height: 100%;
		      background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
		      z-index: 1000;
		      overflow: auto;
		    }
		    
		    .modal-content {
		      background-color: white;
		      margin: 10% auto;
		      padding: 20px;
		      border-radius: 8px;
		      width: 80%;
		      max-width: 500px;
		      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		      animation: fadeIn 0.3s;
		    }
		    
		    @keyframes fadeIn {
		      from { opacity: 0; }
		      to { opacity: 1; }
		    }
		    
		    .modal-header {
		      display: flex;
		      justify-content: space-between;
		      align-items: center;
		      margin-bottom: 15px;
		    }
		    
		    .modal-title {
		      font-size: 20px;
		      font-weight: bold;
		    }
		    
		    .close-btn {
		      color: #aaa;
		      font-size: 28px;
		      font-weight: bold;
		      cursor: pointer;
		    }
		    
		    .close-btn:hover {
		      color: black;
		    }
		    
		    .modal-body {
		      margin-bottom: 20px;
		    }
		    
		    .modal-footer {
		      text-align: right;
		    }
	</style>
	<body>
		<div id='app'>
			<button>打开弹窗</button>
			<my-modal :value='visiable'></my-modal>
			<div class="modal" id="myModal" v-if="show">
			    <div class="modal-content">
			    <div class="modal-header">
			        <h2 class="modal-title">这是标题</h2>
			        <span class="close-btn" @click="close">&times;</span>
			    </div>
			    <div class="modal-body">
			        <p>这是一个简单的弹窗示例。你可以在这里放置任何内容，比如表单、图片或文本。</p>
			    </div>
			    <div class="modal-footer">
			        <button class="btn">确认</button>
			        <button class="btn" style="background-color: #f44336;">取消</button>
			    </div>
			    </div>
			</div>
		</div>
		<script>
			Vue.createApp({
				components:{
					'my-model':Modal
				},
				data(){
					return{
						visiable:false
					}
				},
				methods:{
					
				}
			}).mount('#app')
		</script>
	</body>
</html>

				